<template>
  <div id="app">
    <div v-if="isshow" id="back"><a @click="back" href="javascript:void(0)">返回</a></div>
    <mt-header fixed title="WarCraft By Jiu">

    </mt-header>

    <router-view> </router-view>
    <nav class="mui-bar mui-bar-tab">
      <router-link class="mui-tab-item " to="/home">
        <span class="mui-icon mui-icon-home"></span>
        <span class="mui-tab-label">首页</span>
      </router-link>
      <router-link class="mui-tab-item" to="/huiyuan">
        <span class="mui-icon mui-icon-email"></span>
        <span class="mui-tab-label">会员</span>
      </router-link>
      <router-link class="mui-tab-item" to="/shopcart">
        <span class="mui-icon mui-icon-contact"><span id="cart" class="mui-badge">0</span></span>
        <span class="mui-tab-label">购物车</span>
      </router-link>
      <router-link class="mui-tab-item" to="/search">
        <span class="mui-icon mui-icon-gear"></span>
        <span class="mui-tab-label">搜索</span>
      </router-link>
    </nav>
  </div>
</template>

<script>
  import {vm} from './commom/common.js'
  vm.$on('inputCount',count=>{
    let cart=document.getElementById('cart');
      cart.innerText=parseInt(cart.innerText)+count;
  });


export default {
  name: 'app',
  data(){
      return{
      isshow:false,
      }
  },
  watch:{
    '$route':function (newRoute,oldRoute) {
      if(newRoute.path.toLowerCase()=='/home'){
          this.isshow=false;
      }else{
          this.isshow=true;
      }
    }
  },
  methods:{
      back(){
          this.$router.go(-1)
      }
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
  margin-top: 55px;
}
  #back{
    width: 50px;
    height: 50px;
    z-index: 101;
    position: absolute;
    top:12px;
    left: 20px;
  }
#back a{
  color: greenyellow;
}
</style>
